<template>
    <el-card class="item">
        <template #header>
            <div class="card-header">
                <span>光照</span>
            </div>
        </template>
        <div id="beam" ref="isMounted" style="width: 100%;height: 250px;">

        </div>
    </el-card>
</template>

<script setup>
import { watchEffect, ref} from 'vue';
import * as echarts from 'echarts';
const isMounted = ref(null)
const props = defineProps({
   beam:Array
})

const draw = () => {
    var chartDom = document.getElementById('beam');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: props.beam,
      type: 'bar'
    }
  ]
};    
option && myChart.setOption(option);
}

watchEffect(() => {
    if (isMounted.value) {
        draw()
    }
})

</script>